<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            float: left;
            margin-left: 50px;
        }

        .box1 {
            /*从上到下，红黄绿线性渐变，写两个颜色也行,至少两个*/
            /*background-image: linear-gradient(red,yellow,green);*/
            /*to right从右往左渐变,其余同理*/
            /* background-image: linear-gradient(to right,red,yellow,green); */
            /* 右上方向 */
            /* background-image: linear-gradient(to right top,red,yellow,green); */
            /* 横线顺时针选择20度 */
            /* background-image: linear-gradient(20deg,red,yellow,green); */

            /* 一样可以调角度，不会有就少用 */
            background-image: linear-gradient(red 50px, yellow 100px, green 150px);

        }
        .box2{
            /* 从中间渐变,容器宽高不等往往是椭圆，相等就是圆 */
            /* 第一个at l t,从左上开始,也可以用at 100px 50px 指定圆心点 */
            /* background-image: radial-gradient(at left top,red,yellow,green); */
            /* 强制变成圆 */
            background-image: radial-gradient(circle,red,yellow,green);
        }

        .box3{
            /*前面加上repeating就是重复*/
            /*在没有发生渐变的区域，重新开始渐变就是重复渐变*/
            background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);

        }

        .box4 {
            width: 600px;
            height: 800px;
            padding: 20px;
            border: 1px solid black;
            margin: 0 auto;
            /* background-image: linear-gradient(transparent 0px,transparent 29px,gray 30px); */
            background-image: repeating-linear-gradient(transparent 0px,transparent 29px,gray 30px);
            background-clip: content-box;
        }

        .box5 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-image: radial-gradient(at 80px 80px,white,#333);
        }
    </style>
</head>

<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
</body>

</html>